<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<script type="module">
			import * as THREE from "./node_modules/three/build/three.module.js"
			import * as MT from "./node_modules/three/examples/jsm/loaders/MTLLoader.js"
			import * as OL from "./node_modules/three/examples/jsm/loaders/OBJLoader.js"

			const scene = new THREE.Scene();
			// console.log(scene);

			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);


			// 创建平行光源
			const light = new THREE.DirectionalLight(0xffffff);
			light.position.set(0, 1, 1).normalize();
			// 将光源添加到场景中
			scene.add(light);

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			let person = null;



			const mtlLoader_two = new MT.MTLLoader();
			mtlLoader_two.load('2.mtl', (materials) => {
				materials.preload();
				const objLoader = new OL.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.load('2.obj', (object) => {
					// 设置模型的位置和缩放
					object.position.set(0, -8, -5);
					object.scale.set(1, 1, 1);
					// 添加到场景中
					scene.add(object);
				});
			});

			const mtlLoader = new MT.MTLLoader();
			mtlLoader.load('1.mtl', (materials) => {
				materials.preload();
				const objLoader = new OL.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.load('1.obj', (object) => {
					// 设置模型的位置和缩放
					object.position.set(0, -8, -1.5);
					object.scale.set(1, 1, 1);
					// 添加到场景中
					scene.add(object);
					// person = object;
				});
			});

			const mtlLoader_three = new MT.MTLLoader();
			mtlLoader_three.load('3.mtl', (materials) => {
				materials.preload();
				const objLoader = new OL.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.load('3.obj', (object) => {
					// 设置模型的位置和缩放
					object.position.set(0, 0, 0);
					object.scale.set(1, 1, 1);
					// 添加到场景中
					scene.add(object);
					person = object;
					console.log(object);
				});
			});

			function animate() {
				requestAnimationFrame(animate);
				renderer.render(scene, camera);
			}
			animate();

			// 设置相机位置和朝向
			camera.position.set(2, 2, 10);
			camera.lookAt(scene.position);

			document.body.onkeypress = function(e) {
				if (person == null) {
					return;
				}
				switch (e.key) {
					case 'a':
						person.position.x -= 0.1;
						camera.position.x -= 0.1;
						break;
					case 'd':
						person.position.x += 0.1;
						camera.position.x += 0.1;
						break;
					case 'w':
						person.position.y += 0.1;
						camera.position.y += 0.1;
						break;
					case 's':
						person.position.y -= 0.1;
						camera.position.y -= 0.1;
						break;
					case 'o':
						person.position.z += 0.1;
						camera.position.z += 0.1;
						break;
					case 'i':
						person.position.z -= 0.1;
						camera.position.z -= 0.1;
						break;
				}
			};

			let x = 0,
				y = 0;
			let flag = false;
			document.body.onmousedown = function(e) {
				flag = true;
				x = e.clientX;
				y = e.clientY;
			};
			document.body.onmousemove = function(e) {
				if (person == null) {
					return;
				}
				if (flag) {
					let xd = e.clientX - x;
					let yd = e.clientY - y;
					let ax = Math.abs(xd);
					let ay = Math.abs(yd);
					if (ax > ay) {
						if (xd < 0) {
							// person.rotation.y += 0.01;
							camera.rotation.y += 0.01;
						} else {
							// person.rotation.y -= 0.01;
							camera.rotation.y -= 0.01;
						}
					} else {
						if (yd < 0) {
							// person.rotation.x += 0.01;
							camera.rotation.x += 0.01;
						} else {
							// person.rotation.x -= 0.01;
							camera.rotation.x -= 0.01;
						}
					}
				}
			};
			document.body.onmouseup = function(e) {
				flag = false;
			};
		</script>
	</body>
</html>